<template>
  <div style="z-index: 1">
    <div class="hero min-h-screen bg-base-200" v-if="windowWidth">
      <div class="hero-content flex-col lg:flex-row-reverse">
        <div
          class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100"
          style="min-width: 600px"
        >
          <form class="card-body">
            <div class="form-control">
              <label class="label">
                <h3 class="text-3xl font-bold">找回密码</h3>
              </label>
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">邮箱</span>
              </label>
              <input
                type="email"
                placeholder="请输入需要找回的邮箱账号"
                class="input input-bordered"
                v-model="reg.email"
              />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">验证码</span>
              </label>
              <div>
                <input
                  type="text"
                  placeholder="请输入验证码"
                  class="input input-bordered"
                  v-model="reg.record"
                />
                <!-- 发送验证码 -->
                <button
                  class="link"
                  style="margin: 0 2rem 2rem 2rem"
                  @click="getrecord"
                >
                  发送验证码
                </button>
              </div>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">新密码</span>
              </label>
              <input
                type="password"
                placeholder="请输入密码"
                minlength="8"
                maxlength="16"
                class="input input-bordered"
                v-model="reg.pass"
              />
            </div>
          </form>
          <button
            class="btn btn-primary"
            style="margin: 0 2rem 2rem 2rem"
            @click="sing"
          >
            提交
          </button>
        </div>
      </div>
    </div>
    <form class="card-body" v-else>
      <div class="form-control">
        <label class="label">
          <h3 class="text-2xl font-bold">找回密码</h3>
        </label>
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">邮箱</span>
        </label>
        <input
          type="email"
          placeholder="请输入QQ邮箱"
          class="input input-bordered"
          v-model="reg.email"
        />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">新密码</span>
        </label>
        <input
          type="password"
          placeholder="请输入密码"
          minlength="8"
          maxlength="16"
          class="input input-bordered"
          v-model="reg.pass"
        />
      </div>
    </form>
    <button
      class="btn btn-primary"
      style="margin: 0 2rem 2rem 2rem"
      @click="sing"
      v-if="!windowWidth"
    >
      提交
    </button>
  </div>
</template>

<script lang="ts">
import Method from '@/globalmethods'
import { ElMessage } from 'element-plus'

export default {
  name: 'Setpassword',
  data() {
    return {
      list: [],
      num: 0,
      state: 0,
      windowWidth: true,
      reg: {
        pass: '',
        email: '',
        record: '',
      },
      alerts: [] as any,
      illustrate: '',
      statelist: [],
    }
  },
  methods: {
    getrecord() {
      Method.api_post('/user/getemalrecord', this.reg).then((res) => {
        console.log(res)
      })
    },
    handleResize() {
      this.windowWidth = window.innerWidth > 786 ? true : false
    },
    sing() {
      Method.api_post('/user/resetpass', this.reg)
        .then((res) => {
          console.log(res)
        })
        .catch((error) => {
          ElMessage.error('请求失败，服务器连接异常')
          console.log('error', error)
        })
    },
  },
  mounted() {
    window.addEventListener('resize', this.handleResize) // 监听窗口大小变化
    this.handleResize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize) // 移除监听器
  },
}
</script>

<style scoped>
.alert {
  animation: fadeIn 3s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
